<template>
  <div>
    <h3>故障模拟</h3>
    <el-select v-model="selectedNode" placeholder="请选择节点" style="margin-right: 10px;">
      <el-option v-for="node in nodes" :key="node.nodeId" :label="'节点' + node.nodeId" :value="node.nodeId"></el-option>
    </el-select>
    <el-button type="primary" @click="simulateFailure">模拟故障</el-button>
    <el-button type="success" @click="simulateRecovery">模拟恢复</el-button>
    <el-card shadow="always" style="margin-top: 20px;">
      <el-alert
        :title="simulationStatus"
        :type="simulationType"
        show-icon
        :closable="false"
      >
      </el-alert>
    </el-card>
  </div>
</template>

<script>
export default {
  props: ['nodes'],
  data() {
    return {
      selectedNode: '',
      simulationStatus: '',
      simulationType: ''
    };
  },
  methods: {
    simulateFailure() {
      if (!this.selectedNode) {
        this.$message({
          type: 'warning',
          message: '请选择一个节点'
        });
        return;
      }
      this.simulationStatus = `节点${this.selectedNode} 已模拟故障`;
      this.simulationType = 'error';
      this.$emit('simulate-failure', this.selectedNode);
      this.$message({
        type: 'success',
        message: '故障模拟成功!'
      });
    },
    simulateRecovery() {
      if (!this.selectedNode) {
        this.$message({
          type: 'warning',
          message: '请选择一个节点'
        });
        return;
      }
      this.simulationStatus = `节点${this.selectedNode} 已模拟恢复`;
      this.simulationType = 'success';
      this.$emit('simulate-recovery', this.selectedNode);
      this.$message({
        type: 'success',
        message: '恢复模拟成功!'
      });
    }
  }
};
</script>

<style scoped lang="scss">
h3 {
  margin-bottom: 20px;
}

.el-select {
  margin-right: 10px;
}
</style>
